import React from 'react';
import { Card, Descriptions, Tooltip } from 'antd';
import ChangeTab from './simTabs/changeTab';
import HistoryTab from './simTabs/historyTab';
import UseTab from './simTabs/useTab';
import WarningTab from './simTabs/warningTab';
import { getDicByKey } from '@/support/common';
import PropTypes from 'prop-types';
import { connect } from 'dva';
import { ExclamationCircleTwoTone } from '@ant-design/icons';
import MaskText from '@/components/MaskText';

@connect((state: any) => ({
  vehicleInfo: state.vehicleInfo,
  loading: state.loading.effects['vehicleInfo/getDataWithRes'],
}))
export default class SimTab extends React.Component<any, any> {
  tabs = [
    {
      tab: '流量使用情况',
      key: 'useTab',
      com: () => <UseTab />,
    },
    {
      tab: '实名认证记录',
      key: 'changeTab',
      com: () => <ChangeTab />,
    },
    {
      tab: '阈值提醒记录',
      key: 'warningTab',
      com: () => <WarningTab />,
    },
    {
      tab: '换件历史记录',
      key: 'historyTab',
      com: () => <HistoryTab />,
    },
  ];
  constructor(props) {
    super(props);
    this.state = {
      data: {
        deviceId: '',
        iccid: '',
        carrierBrand: '',
        msisdn: '',
        createDate: '',
        simStatus: '',
        activeTime: '',
        produceDate: '',
        realNameStatus: '',
        realNameEntity: '',
      },
      current: 'useTab',
    };
  }
  onTabChange = current => {
    this.setState({ current });
  };

  static contextTypes = {
    dicData: PropTypes.any,
  };
  componentDidMount() {
    this.getDetail();
  }
  componentWillUnmount = () => {
    this.setState = (state, callback) => {
      return;
    };
  };
  getDetail() {
    const { vehicleInfo } = this.props;
    const { dispatch } = this.props;

    vehicleInfo.iccid
      ? dispatch({
        type: 'vehicleInfo/getDataWithRes',
        payload: {
          url: '/simcard/findsimcarddetail',
          iccid: vehicleInfo.iccid,
          vin: vehicleInfo.vin,
        },
        callback: response => {
          if (response && response.statusCode == '0' && response.data) {
            this.setState({
              data: Object.assign(this.state.data, response.data),
            });
          }
        },
      })
      : '';
  }

  render() {
    const { context } = this;
    const { data } = this.state;
    const onChangeIcon = () => {
      if (data.msisdn) {
        return <ExclamationCircleTwoTone style={{ marginLeft: 10 }} twoToneColor="yellow" />;
      }
      return;
    };

    return (
      <>
        <Descriptions bordered size="small" style={{ marginBottom: '10px', overflow: 'hidden' }}>
          <Descriptions.Item label="IMSI">{data.deviceId}</Descriptions.Item>
          <Descriptions.Item label="ICCID">{data.iccid}</Descriptions.Item>
          <Descriptions.Item label="运营商品牌">
            {getDicByKey(
              context.dicData,
              'carrierBrand',
              data.carrierBrand || data.carrierBrand === 0
                ? data.carrierBrand.toString()
                : data.carrierBrand,
            )}
          </Descriptions.Item>

          <Descriptions.Item label="SIM卡号">
            <MaskText text={data.msisdn} type="simCard" />
            <Tooltip title="即MSISDN">
              {onChangeIcon()}
            </Tooltip>

          </Descriptions.Item>

          <Descriptions.Item label="入库时间">{data.createDate}</Descriptions.Item>

          <Descriptions.Item label="激活时间">{data.activeTime}</Descriptions.Item>
          <Descriptions.Item label="生产日期">{data.produceDate}</Descriptions.Item>
          <Descriptions.Item label="实名状态">
            {data.realNameStatus === '0' ? '未实名' : data.realNameStatus === '2' ? '已实名' : ''}
          </Descriptions.Item>
        </Descriptions>

        <Card onTabChange={this.onTabChange} tabList={this.tabs}>
          {this.tabs.find(e => e.key === this.state.current)?.com()}
        </Card>
      </>
    );
  }
}
